<template>
	<view class="box">
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">

				</view>
			</view>
		</view>
		<view class="orderwrap">
			<view class="orderitem" v-for="item in lists" :key="item.id">
				<view class="itemtop">

					<view class="name fw5" @click="goMerchantHome(item)">
						{{item.local_seller&&item.local_seller.name}}
					</view>
					<view class="tag3" v-if="item.status==1">
						待支付
					</view>
					<view class="tag" v-if="item.status==2">
						待使用
					</view>
					<view class="tag2" v-if="item.status==4">
						<text v-if="item.pay_status==3">已退款</text>
						<text v-else>已完成</text>
					</view>
					<view class="tag2" v-if="item.status==3">
						待评价
					</view>
					<view class="tag2" v-if="item.status==5">
						已取消
					</view>
				</view>
				<view class="itemcenter" @click="godetail(item)">
					<!-- <image src="/static/image/test.png" mode="aspectFill"></image> -->
					<image :src="item.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem c6" style="margin-top: 0rpx;">
							{{item.goods_name}}
						</view>
						<view class="itemcenterrightitem c6">
							<text class="textone">数量X{{item.num}}</text>
						</view>
						<view class="itemcenterrightitem c6">
							￥{{item.price}}
						</view>
					</view>
				</view>

				<view class="itemcenterbot">
					<view class="time">
						<text class="text1" v-if="item.countdown>0&&item.status==1">剩余时间：</text>
						<u-count-down class="c1" v-if="item.countdown>0&&item.status==1" :time="item.countdown*1000"
							format="HH:mm:ss" @finish="isFinish"></u-count-down>
						<!-- <text class="text2" v-if="item.status==3">最新物流:你的快递已经到达【郑州航空</text> -->
					</view>
					<view class="btnwrap">
						<!-- <text class="btn1" v-if="status===0" >取消</text> -->
						<text class="btn1" v-if="item.status===1" @click="cancels(item.id)">取消订单</text>
						<text class="btn1" v-if="item.status===2" @click="applytk(item)">申请退款</text>
						<text class="btn3" v-if="item.status===2" @click="gocode(item.id)">出示核销码</text>
						<text class="btn1" v-if="item.status===4&&item.pay_status==2"
							:class="{ 'opacity-50': item.evaluate_time!='', 'opacity-100':  item.evaluate_time==''}"
							@click="gopj(item.id,item.evaluate_time)">去评价</text>
						<text class="btn1" v-if="item.status===4" @click="godetail(item)">查看详情</text>
						<text class="btn2" v-if="item.status===1&&item.countdown>0" @click="gopay(item)">去支付</text>
					</view>
				</view>
			</view>
			<view class="empty2">

			</view>
			<noDatas :xxxList="lists" :status="status"></noDatas>
		</view>

		<u-popup :show="applyflag" mode="bottom" @close="applyflag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false" :safeAreaInsetBottom="false">
			<view class="popup-content">
				<text class="popup-title h2">选择退款商品数量</text>
				<view class="wrapss">
					<image :src="shitem.goods.image" mode="aspectFill"></image>
					<view class="maincenter">
						<view class="maincentername">
							{{shitem.goods.name}}
						</view>
						<view class="maincentername">
							数量X{{shitem.num}}
						</view>
						<view class="maincentername" style="margin-bottom: 0rpx;">
							金额：￥{{shitem.pay_price}}
						</view>
						<view class="numberbox">
							<u-number-box v-model="numbers" inputWidth="24" :max="shitem.returnable_num" buttonSize="24"
								bgColor="#ffffff"></u-number-box>
						</view>
					</view>
				</view>
				<view class="btnsss" @click="flagsh=true,applyflag=false">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup :show="flagcanel" mode="center" @close="flagcanel = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要取消订单吗</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="flagcanel = false">取消</text>
					<text @click="submitcanel">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="flagsh" mode="center" @close="flagsh = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">您确定要申请退款吗</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="flagsh = false">取消</text>
					<text @click="submittk">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		oderlist,
		cancelorder,
		receive
	} from "../../api/order.js"
	import {
		orderlist,
		refund,
		cancel
	} from "../../api/local.js"
	export default {
		data() {
			return {
				toggleList: [{
						label: '全部',
						statusval: "",
						select: true
					}, {
						label: '待支付',
						statusval: "1",
						select: false
					}, {
						label: '待使用',
						statusval: "2",
						select: false
					},
					{
						label: '已完成',
						statusval: "4",
						select: false
					},


				],
				selval: "",
				indexs: 0,
				status: 5,
				page: 1,
				size: 50,
				status: "loadmore",
				lists: [],
				statusval: "",
				tipShow: false,
				items: null,
				itemstwo: null,
				selid: 0,
				tipShowtwo: false,
				selidtwo: 0,
				canelid: "",
				flagcanel: false,
				flagsh: false,
				shitem: {
					goods: {
						image: ""
					}
				},
				applyflag: false,
				numbers: 1
			}
		},
		onShow() {
			this.tipShow = false
		},
		onLoad(e) {
			if (e.id) {
				if (e.id == 0) {
					this.statusval = ""
				}
				if (e.id == 1) {
					this.statusval = "1"
				}
				if (e.id == 2) {
					this.statusval = "2"
				}
				this.indexs = e.id
			}
			this.getlist()
		},
		methods: {
			gopj(id, time) {
				if (time == '') {
					uni.navigateTo({
						url: "/pageOrder/localorder/evaluatelist?id=" + id
					})
				} else {
					uni.$u.toast("您已评价该订单")
				}

			},
			cancels(id) {

				this.canelid = id
				this.flagcanel = true

			},
			gocode(id) {
				uni.navigateTo({
					url: "/pageOrder/localorder/usecode?id=" + id
				})
			},
			submittk() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				refund({
					id: this.shitem.id,
					refund_num: this.numbers,

				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.flagsh = false
						this.numbers = 1
						this.page = 1
						this.getlist()
					}

					uni.$u.toast(res.msg)
				})
			},
			applytk(item) {
				console.log(item)
				this.shitem = item
				this.applyflag = true
			},
			isFinish(e) {

			},
			gopay(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pagesMy/cloudCat/paymentCenter?type=2' + '&id=' + item.id + '&totalPrice=' + item
							.pay_price
					})
				}
				if (item.type == 2) {
					uni.navigateTo({
						url: '/pagesMy/cloudCat/paymentCenter?type=2' + '&id=' + item.id + '&totalPrice=' + item
							.pay_price
					})
				}
				if (item.type == 3) {
					uni.navigateTo({
						url: '/pagesMy/cloudCat/otherpaymentCenter?' + 'id=' + item.id + '&totalPrice=' + item
							.pay_price
					})
				}

				console.log(item)
			},
			cancel(id) {
				this.canelid = id
				this.flagcanel = true
			},
			subsh(item) {
				this.shitem = item
				console.log(this.shitem.id)
				this.flagsh = true
			},
			submitcanel() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				cancel({
					id: this.canelid
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.flagcanel = false
						this.page = 1
						this.getlist()
					}
					uni.$u.toast(res.msg)
				})
			},
			changeitem(id) {
				this.selid = id
				setTimeout(() => {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/applyaftersale?id=" + id
					})
				}, 500)
			},
			changeitemtwo(id) {
				this.selidtwo = id
				setTimeout(() => {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/evaluate?id=" + id
					})
				}, 500)
			},
			selitem(item) {
				console.log(item)
				if (item.detail.length > 1) {
					this.items = item
					console.log(this.items)
					this.tipShow = true
				} else {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/applyaftersale?id=" + item.detail[0].id
					})
				}


			},
			selitemtwo(item) {
				if (item.detail.length > 1) {
					this.itemstwo = item
					this.tipShowtwo = true
				} else {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/evaluate?id=" + item.detail[0].id
					})
				}


			},
			goaftersale(id) {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/applyaftersale?id=" + id
				})
			},
			getlist() {
				orderlist({
					status: this.statusval,
					page: this.page,
					page_size: this.size
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;

						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res)
				})
			},
			goMerchantHome(item) {

				if (item.local_seller && item.local_seller.id) {
					uni.navigateTo({
						url: '/pagesMy/groundCat/merchantHomepagew?id=' + item.local_seller.id
					})
				} else {
					uni.$u.toast('当前商家已退店')
				}
			},
			godetail(item) {
				if (item.local_seller && item.local_seller.id) {
					uni.navigateTo({
						url: '/pageOrder/localorder/localorderdetail?id=' + item.id
					})
				} else {
					uni.$u.toast('当前商家已退店')
				}
			},
			clickToggleHandle(ele, index) {
				this.statusval = ele.statusval
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				console.log(ele, index)

				this.selval = ele.label
				this.page = 1
				this.getlist()
			},
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		},
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		width: 750rpx;
		height: 100vh;
	}

	.opacity-50 {
		opacity: 0.5;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;

		z-index: 999;
		justify-content: space-around;

		.tab-list-item {
			position: relative;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}

	.active2 {
		background: #f2f2f2;
		border-radius: 10rpx;
	}

	.orderwrap {
		width: 750rpx;
		position: relative;
		top: 120rpx;

		.orderitem {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;

			.itemtop {
				display: flex;

				.name {
					display: flex;
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;
					color: #333;
				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 46rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #FFC300;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFC300;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 46rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}

				.tag3 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 46rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						white-space: nowrap;
						/* 强制文本不换行 */
						overflow: hidden;
						/* 隐藏溢出部分 */
						text-overflow: ellipsis;
						color: #666;

						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

			.itemcenterbot {
				display: flex;
				position: relative;
				margin-top: 32rpx;
				margin-left: 22rpx;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.time {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #E78C4C;

					.text1 {
						font-weight: 400;
						font-size: 26rpx;
						color: #E78C4C;
					}

					.text2 {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
					}

				}

				.btnwrap {
					display: flex;
					align-items: center;
					margin-right: 24rpx;

					.btn1 {
						width: 152rpx;
						height: 52rpx;
						border-radius: 536rpx 536rpx 536rpx 536rpx;
						border: 1rpx solid #A6A5AF;
						text-align: center;
						line-height: 54rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						margin-left: 24rpx;
					}

					.btn2 {
						width: 152rpx;
						height: 52rpx;
						border-radius: 536rpx 536rpx 536rpx 536rpx;
						border: 1rpx solid #F63418;
						text-align: center;
						line-height: 54rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #F63418;
						margin-left: 24rpx;
					}

					.btn3 {
						width: 152rpx;
						height: 52rpx;

						border-radius: 536rpx 536rpx 536rpx 536rpx;
						border: 1rpx solid #FFC300;
						text-align: center;
						line-height: 54rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFC300;
						margin-left: 24rpx;
					}
				}
			}
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 750rpx;
		min-height: 460rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0rpx 0rpx;


	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.numberbox {
		position: absolute;
		bottom: 0rpx;
		right: 20rpx;
	}

	.btns {
		width: 680rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.wrapss {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		// flex-direction: column;
		// padding-bottom: 50rpx;
		width: 680rpx;
		height: 140rpx;

		>image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.maincenter {
		width: 530rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-left: 34rpx;
		position: relative;
	}

	.maincentername {
		margin-bottom: 16rpx;
	}

	.itemcenter2 {
		width: 600rpx;
		min-height: 140rpx;
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		padding: 10rpx;

		>image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.itemcenterright {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.itemcenterrightitem {
				width: 400rpx;
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;

				/* 显示省略号 */
				.textone {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}

				.texttwo {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					margin-left: 34rpx;
				}
			}
		}
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}

	/deep/.u-count-down__text {
		color: #E78C4C !important;
	}

	.btnsss {
		text-align: center;
		line-height: 80rpx;
		width: 680rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
	}
</style>